<template>
  <el-container class="muzi">
    <el-header>
      <div class="left-panel">
        <el-button type="primary" @click="onCreate" plain>添加</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.keyword" placeholder="搜索客户名称" class="tax-search-name" @blur="onSearch" clearable/>
          <el-button type="primary" icon="el-icon-search" :loading="search.loading" @click="onSearch"/>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table :data="pager.dataList" border>
        <el-table-column type="selection" width="45"  align="center"/>
        <el-table-column prop="name" label="名称"  align="center"/>
        <el-table-column prop="type" label="分类"  align="center"/>
        <el-table-column prop="department" label="部门"  align="center"/>
        <el-table-column prop="salesman" label="业务员"  align="center"/>
        <el-table-column prop="contact" label="联系人"  align="center"/>
        <el-table-column prop="sex" label="性别"  align="center"/>
        <el-table-column prop="mobile" label="手机" align="center" />
        <el-table-column prop="tel" label="座机"  align="center"/>
        <el-table-column fixed="right" label="操作" min-width="145" align="center">
          <template #default="scope">
            <el-button type="info" icon="el-icon-files" circle @click="onProject(scope.row)" title="点击查看包含项目"/>
            <el-button type="primary" icon="el-icon-edit" circle @click="onEdit(scope.row)"/>
            <el-button type="danger" icon="el-icon-delete" circle @click="onDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="operating" :gutter="5">
        <el-col :span="6" class="pager">
          <el-pagination layout="prev, pager, next" :total="pager.total"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
/**
 * 客户资料
 * @author Yufe
 * @version 1.0
 */
import DataForm from "@/views/clientele/form";

export default {
  name: 'Blank',
  components: {DataForm},
  data() {
    return {
      search: {
        keyword: '',
        loading: false
      },
      pager: {
        total: 0,
        dataList: [],
        clean: function () {
          this.total = 0;
          this.dataList.length = 0;
        },
        fill: function ({total, dataList}) {
          this.total = total;
          this.dataList = dataList;
        }
      }
    }
  },
  mounted() {
    this.onSearch();
  },
  computed: {},
  methods: {
    onSearch(number = 1) {
      this.$API.clientele.pager.get({number}).then(res => {
        if (res.success) {
          this.pager.fill(res.data);
        }
      })
    },
    onCreate() {
      this.$router.push({name: "clientele-form"})
    },
    onProject(row) {
      this.$router.push({name: "project", query: {serial: row.serial}})
    },
    onEdit(row) {
      this.$router.push({name: "clientele-form", query: {serial: row.serial}})
    },
    onDelete(row) {
      this.$confirm(`确认要删除“${row.name}”吗?`, '警告提示', {type: 'warning',}).then(() => {
        this.$API.clientele.detail.delete(row.serial).then(res => {
          if (res.success) {
            this.$message.success("删除成功")
            this.onSearch()
          }
        })
      }).catch((err) => {
        console.warn(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
